<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"/>
	<script type="text/javascript" src="../mootools-1.2-core.js"></script>
	<script type="text/javascript" src="../gun.gchart.js"></script>
	<script type="text/javascript">
	var theme = new gun.gchart.Theme();
	theme.setTitle(24, 'ff0000');
	theme.setFillBackground('gradient', '', 0, ['76A4FB',1,'ffffff',0]);
	theme.setFillChart('solid', '000000');

	window.addEvent('domready', function() {
		new gun.gchart.Bar.Horizontal({
			size: [400, 200],
			title: 'bar chart 1',
			width: 18,
			data: [[64, 18, 18],[55, 20, 38]],
			colors: ['FF3300', '3300FF'],
			legends: ['IE', 'FF3']
		}).inject('chartContainer1');

		var bar2 = new gun.gchart.Bar.Horizontal();
		bar2.setSize(400, 240);
		bar2.setTitle('bar chart 2');
		bar2.addData([[64, 18, 18],[55, 20, 38]], ['939393', '555555'], ['IE', 'FF3']);
		bar2.setWidth(20);
		bar2.setLegendPosition(gun.gchart.TOP);
		bar2.inject('chartContainer2');

		var bar3 = new gun.gchart.Bar.Horizontal();
		bar3.setTitle('bar chart 3');
		bar3.addData([
			{data: [64, 18, 18], color: '939393', legend: 'IE'},
			{data: [55, 20, 38], color: '555555', legend: 'FF3'},
			{data: [40, 20, 10], color: 'FF9933', legend: 'Opera'}
		]);
		bar3.inject('chartContainer3');
	});
	</script>
	<style type="text/css">
	.chart { border:1px solid #ccc; margin: 10px auto; padding: 10px; width:500px;}
	</style>
</head>
<body>

	<div class="chart" id="chartContainer1"></div>
	<div class="chart" id="chartContainer2"></div>
	<div class="chart" id="chartContainer3"></div>
	<div class="chart" id="chartContainer4"><script type="text/javascript">
	new gun.gchart.Bar.Vertical({
		size: [400, 200],
		title: 'bar chart 4',
		width: 12,
		barSpace:0,
		groupSpace:50,
		data: [[64, 18, 18],[55, 20, 38], [20, 50, 70], [50, 80, 90], [75,22,55]],
		colors: ['FFFF99', 'CCFFFF', 'FFCC66', 'FFCCFF', 'EAEAEA'],
		legends: ['IE', 'FF3', 'Opera', 'Chrome', 'Safari'],
		legendPosition: gun.gchart.LEFT,
		theme: theme
	}).draw();
	</script></div>

</body>
</html>